Conversation
danctila
left a comment
danctila
left a comment
There was a problem hiding this comment.
couple cmmts to look into and one other thing about code quality:
right now this file is currently doing:
- API calls for fetching, uploading, saving, deleting, getting presigned URLs
- Business logic for the 4-step upload and file extension parsing
- State management for the 4 pieces of state wired together manually
- UI rendering of the full page
^ this is pretty much the entire stack in one file so we want to pull out a lot of this to different places. The UI will mostly get scrapped later since this is just a test page but the API layer for example should be extracted to somewhere like shared in its own module with reusable functions
The upload logic should also be a custom hook. The 4-step upload, state management for the loading state and storing the URL as well as handleUpload / handleRemove / etc... handlers can all be used in a useProfilePicture hook. The component would be simple and it's only job would be to render instead of managing the async workflow. For example
const { profilePicUrl, status, isLoading, handleUpload, handleRemove } = useProfilePicture(userId)Also getFileExtension should be moved to utilities since it doesn't have anything to do with this component specifically
After splitting the code up the route file itself would shrink to basically just rendering the UI and calling into the hook and later when we use this in the profile page it will be much easier to reuse
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #114 +/- ##
========================================
- Coverage 9.53% 9.35% -0.19%
========================================
Files 142 145 +3
Lines 7266 7410 +144
Branches 22 22
========================================
Hits 693 693
- Misses 6557 6701 +144
Partials 16 16
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
…fp-frontend pulling merge conflict fix
2 participants
Description
TODO:
New profile pic page at /flows/pfp with the ability to delete and upload a photo using the functionality in the other S3 PR's
Type of Change
Related Issue(s)
Closes #
Related to #51
What Changed?
-Frontend pfp page with hardcoded data
-Upload and delete buttons
Testing & Validation
How this was tested
Screenshots/Recordings
Unfinished Work & Known Issues
Notes & Nuances
Pre-Merge Checklist
Code Quality
Testing & CI
Documentation
Reviewer Notes